<template>
  <div class="add-role">
    <a-spin :spinning="loading">
      <a-form :model="formState" ref="formDataRef" name="basic" :label-col="{ style: 'width:80px' }" :wrapper-col="{ style: 'calc(100% - 80px)' }" autocomplete="off">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="角色名称" name="name" :rules="[{ required: true, message: '请填写角色名称!' }]">
              <a-input v-model:value="formState.name" :maxlength="20" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <!-- <a-col :span="12">
            <a-form-item label="数据权限" name="dataScope" :rules="[{ required: true, message: '请选择数据权限!' }]">
              <a-select v-model:value="formState.dataScope" placeholder="请输入">
                <a-select-option v-for="(item, index) in dataDict['DATA_PERMISSION']" :key="index" :label="item.name" :value="item.code">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->
          <a-col :span="12">
            <a-form-item label="备注" name="remark" :rules="[{ required: false, message: '请填写备注!' }]">
              <a-textarea v-model:value="formState.remark" show-count :maxlength="100" placeholder="请输入" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div class="nav-wrapper">
        <a-tabs v-model:activeKey="formState.type">
          <a-tab-pane v-for="item in clientOpts" :key="item.code">
            <template #tab>
              <a-checkbox @click.stop v-model:checked="item.checked"></a-checkbox>
              {{ item.name }}
            </template>
          </a-tab-pane>
        </a-tabs>
        <!-- 模块内容 -->
        <div v-if="type === 1">
          <component v-if="showPanel" :is="showPanel" :type="type" :visible="visible" :passData="activeMenu"></component>
          <a-empty v-else />
        </div>
        <div v-else>
          <component v-if="showPanel && isInit" :is="showPanel" :type="type" :visible="visible" :passData="activeMenu"></component>
          <a-empty v-else />
        </div>
      </div>
    </a-spin>
    <div class="submit-wrapper">
      <a-button v-debounce type="primary" @click="submitHandle">保 存</a-button>
      <a-button @click="cancelHandle">取 消</a-button>
    </div>
  </div>
</template>
<script lang="ts">
import Management from "../management/index.vue";
export default {
  components: {
    Management
  }
};
</script>
<script lang="ts" setup>
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { toRefs, watch } from "vue";
import CommonHook from "@/hook/commonHook";
import { getRoleInfoApi } from "@/api/managementCenter/roleAndPermission";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    type: number;
    passData: RoleAndPermission.ListRows;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "submit"): void;
}>();
const { visible, type, passData } = toRefs(props);
const { flattening, convertToTree } = CommonHook();
const { formState, formDataRef, getAllClientCode, loading, isInit, showPanel, clientOpts, activeMenu } = InitHook();
const { submitHandle, cancelHandle, resetFields } = OperationHook({ passData, formDataRef, formState, emit, type, convertToTree, clientOpts });
const init = async () => {
  await getAllClientCode();
  if (type.value === 2) {
    loading.value = true;
    getRoleInfoApi({ id: passData.value.id })
      .then((res: any) => {
        const { code, data } = res;
        if (code === 200) {
          const { name, clients, remark } = data;
          Object.assign(formState, { name, remark });
          if (clients && clients.length) {
            for (let i = 0; i < clients.length; i++) {
              const target = clients[i];
              const source = clientOpts.value.find((t: any) => t.code === target.code);
              if (source) {
                source.checked = true;
                if (target.child) source.clients = flattening(target.child);
                // if (target.child) source.clients = target.child;
              }
            }
          }
          isInit.value = true;
        }
      })
      .finally(() => (loading.value = false));
  }
};
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    } else {
      isInit.value = false;
      resetFields();
      formDataRef.value.clearValidate();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
.add-role{
    padding-bottom: 50px;
    .submit-wrapper{
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        padding: 12px 0;
        background-color: #fff;
        position: absolute;
        bottom: 0px;
        box-shadow: 4px 1px 5px #ccc;
        :deep(.ant-btn){
          margin-right: 8px;
        }
    }
}
</style>
